@import (reference) 'config';
@import (reference) 'icons';

.transactions {

  w-radio-wrap {
    flex-grow: 1;
  }

  .transactions-content {
    display: flex;
    flex-direction: column;
    height: 100%;

    .controls {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      min-height: 42px;
      padding-bottom: 11px;
      z-index: 1;
      background: @app-background;

      .btn-wrap.btn-group {
        justify-content: flex-start;
        padding: 0;
        align-items: center;
        height: 42px;

        .btn.btn-radio {
          font-size: 15px;
          font-family: @font-roboto-medium;
        }
      }
    }
  }

  w-select {
    &.split-mode {
      display: none;
    }
    &.tx-filter {
      margin-right: 10px;
      flex-grow: 0;
      white-space: nowrap;
    }
  }

  button.download {
    flex-grow: 0;
  }
}

@media screen and (max-width: 1024px) {
  .transactions {
    w-radio-wrap.split-mode {
      display: none;
    }

    w-select.split-mode {
      display: block;
      width: 100%;
      margin-right: 10px;
    }

    w-button {
      & > *.interface svg {
        margin-left: 0;
        margin-right: 0;
      }
      button.download {
        width: 42px;
        height: 42px;
        padding: 0;
        background-position: center;
        span {
          display: none;
        }
      }
    }
  }
}
